#guestbook{
  display: flex;
  justify-content: center;
  min-height: 90vh;
  transform: translateY(-4vh);
  background: #f4f5f5;
  padding:20px 0;
}
.guestbook-center{
  width: 80vw;
  transform: translateY(2vh);
  background: #f4f5f5;
  border-radius: 5px;

  >div:nth-child(1){
    height: 22vh;
    background: #ffffff;
    border-radius: 5px;
    display: flex;

    >div:nth-child(1){
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    >div:nth-child(1) .el-image{
      transform:scale(0.7);
    }
    >div:nth-child(2){
      flex: 8;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    >div:nth-child(2) span{
      width: 100%;
      height: 20%;
      padding: 5px 0;
      display: flex;
      align-items: center;
    }
    >div:nth-child(2) span:nth-child(1){
      font-size: 1.5rem;
      font-weight: 600;
    }
    >div:nth-child(2) span:nth-child(2){
      color: #8a919f;
      font-size: 14px;
    }
    >div:nth-child(2) span:nth-child(3){
      font-size: 1rem;
      color: #515767;
    }
    >div:nth-child(3){
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    >div:nth-child(3) .el-button{
      width: 96px;
      height: 40px;
      font-size: 1rem;
    }

  }

  .guestbook--centent{
    .el-main{
      flex: 3;
      display: flex;
      flex-direction: column;
      padding:0;
      margin-top: 20px;

      >div:nth-child(1){
        height: 10vh;
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
      }
      >div:nth-child(1) span:nth-child(1){
        height: 80%;
        transform: translateY(3px);
        //flex: 1;
        //display: flex;
        //align-items: center;
        margin-right: 10px;
      }
      >div:nth-child(1) span:nth-child(2){
        height: 50%;
        flex: 8;
      }
      >div:nth-child(1) span:nth-child(2) :deep(.el-input__inner){
        background-color: #f2f3f5;
        color: #8a919f;
      }
      >div:nth-child(1) span:nth-child(2) :deep(.el-input__inner:focus){
        border: none;
      }
      .el-tabs{
        margin-top: 20px;
        background: #ffffff;
      }
      :deep(.el-tabs .el-tabs__content){
        background: #f4f5f5;
      }
      :deep(.el-tab-pane){
      }
    }
    .el-aside{
      flex: 1;
      margin: 20px 10px;
    }
  }

}


:deep(.el-dialog .el-dialog__body){
  padding-top:0;

  .el-container{
  }
}
.el-dialog .el-input,
.el-dialog .el-input  :deep(.el-input__inner){
  height: 30vh;
}
.el-dialog .el-input  :deep(.el-input__inner::-webkit-input-placeholder){
  position:relative;
  top: -7vh;
  left: .5rem;
}

.el-dialog >div:nth-child(2) .el-main{
  display: flex;
  justify-content: flex-start;
  align-items: center;

  span{
    margin-right: 20px;
  }
}
.el-dialog >div:nth-child(2) .el-aside {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
